<template>
  <div class="contents">
    <el-drawer v-model="props.showDrawer" class="jzt-drawer" :with-header="false" size="40%" :before-close="handelbeforeClose">
      <div class="head_title">
        <span>更多筛选</span>
        <el-icon size="20" @click="handelbeforeClose"><CloseBold /></el-icon>
      </div>
      <div class="content">
        <div class="center_content">
          <div class="center_content_becurrent">
            <div class="header">
              <span>通用筛选</span>
              <!-- <span>共 <span class="total">500</span> 个搜索结果</span> -->
            </div>
            <div style="display: flex; flex-wrap: wrap">
              <div v-for="(item, index) in _filterData" :key="item.stastsId">
                <div v-if="item.isCommon === 1" class="attr-item mb20">
                  <!-- 一级属性名称 -->
                  <p style="color: #86909c; font-size: 16px">{{ item.stastsName }}：</p>
                  <el-checkbox-group v-model="filterVal[index]" size="small">
                    <!-- 二级属性 -->
                    <div v-for="(item2, index2) in item.children" class="attr-wrap" :key="index2">
                      <div
                        class="secondary"
                        v-if="item2.children?.length > 0"
                        @click="handelClickChose(item2)"
                        :class="item2.checked ? 'active-secondary' : ''"
                      >
                        <el-checkbox
                          :label="item2.stastsName"
                          :value="item2.stastsId"
                          :key="item2.stastsId"
                          @change="
                            val => {
                              changeAttr2(val, item, item2, index);
                            }
                          "
                        >
                          <template #default>
                            <p class="attr2">{{ item2.stastsName }}</p>
                          </template>
                        </el-checkbox>
                      </div>
                      <div v-else class="child_name" @click="handelClickChose(item2)" :class="item2.checked ? 'active' : ''">
                        <el-checkbox
                          :label="item2.stastsName"
                          :value="item2.stastsId"
                          :key="item2.stastsId"
                          @change="
                            val => {
                              changeAttr2(val, item, item2, index);
                            }
                          "
                        >
                          <template #default>
                            <p class="attr2">{{ item2.stastsName }}</p>
                            <div class="check" v-if="item2.checked">
                              <img :src="check" />
                            </div>
                          </template>
                        </el-checkbox>
                      </div>
                      <!-- 三级属性 -->
                      <div class="attr3 ml4" v-if="item2?.children?.length > 0">
                        <el-select
                          v-model="item2.select3"
                          placeholder="请选择"
                          size="small"
                          clearable
                          style="min-width: 120px"
                          multiple
                          @change="
                            val => {
                              changeAttr3(val, item2, index, index2);
                            }
                          "
                        >
                          <el-option
                            v-for="item3 in item2.children"
                            :key="item3.stastsId"
                            :label="item3.stastsName"
                            :value="item3.stastsId"
                          />
                        </el-select>
                      </div>
                    </div>
                  </el-checkbox-group>
                </div>
              </div>
            </div>
          </div>
          <div class="center_content_specification">
            <div class="header">规格属性筛选</div>
            <div style="display: flex; flex-wrap: wrap">
              <div v-for="(item, index) in _filterData" :key="item.stastsId">
                <div v-if="item.isCommon === 0" class="attr-item mb20">
                  <!-- 一级属性名称 -->
                  <p style="color: #86909c; font-size: 16px">{{ item.stastsName }}：</p>
                  <el-checkbox-group v-model="filterVal[index]" size="small">
                    <!-- 二级属性 -->
                    <div v-for="(item2, index2) in item.children" class="attr-wrap" :key="index2">
                      <div
                        class="secondary"
                        v-if="item2.children?.length > 0"
                        @click="handelClickChose(item2)"
                        :class="item2.checked ? 'active-secondary' : ''"
                      >
                        <el-checkbox
                          :label="item2.stastsName"
                          :value="item2.stastsId"
                          :key="item2.stastsId"
                          @change="
                            val => {
                              changeAttr2(val, item, item2, index);
                            }
                          "
                        >
                          <template #default>
                            <p class="attr2">{{ item2.stastsName }}</p>
                          </template>
                        </el-checkbox>
                      </div>
                      <div v-else class="child_name" @click="handelClickChose(item2)" :class="item2.checked ? 'active' : ''">
                        <el-checkbox
                          :label="item2.stastsName"
                          :value="item2.stastsId"
                          :key="item2.stastsId"
                          @change="
                            val => {
                              changeAttr2(val, item, item2, index);
                            }
                          "
                        >
                          <template #default>
                            <p class="attr2">{{ item2.stastsName }}</p>
                            <div class="check" v-if="item2.checked">
                              <img :src="check" />
                            </div>
                          </template>
                        </el-checkbox>
                      </div>
                      <!-- 三级属性 -->
                      <div class="attr3 ml4" v-if="item2?.children?.length > 0">
                        <el-select
                          v-model="item2.select3"
                          placeholder="请选择"
                          size="small"
                          clearable
                          style="min-width: 120px"
                          multiple
                          @change="
                            val => {
                              changeAttr3(val, item2, index, index2);
                            }
                          "
                        >
                          <el-option
                            v-for="item3 in item2.children"
                            :key="item3.stastsId"
                            :label="item3.stastsName"
                            :value="item3.stastsId"
                          />
                        </el-select>
                      </div>
                    </div>
                  </el-checkbox-group>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="btn">
        <el-button type="" @click="handleResat">重置</el-button>
        <el-button type="primary" @click="handleSuer">确定</el-button>
      </div>
    </el-drawer>
  </div>
</template>
<script setup>
import { defineProps, defineEmits, reactive, onMounted, ref } from "vue";
import check from "@/static/images/check.png";
import { CloseBold } from "@element-plus/icons-vue";
// api
import { queryStastsList } from "@/apis/createFile/index.js";
const emits = defineEmits(["close", "hadOk"]);
const props = defineProps({
  showDrawer: {
    type: Boolean,
    default: false
  },
  categoryId: {
    type: String,
    default() {
      return "";
    }
  }
});
const filterVal = ref([]);
const filterVal3 = ref([]); //用户选中的3级筛选属性值
const isChose = ref(false);
const data = reactive({
  screenList: [],
  choseList: []
});
const _filterData = ref([]);
const choseList = ref([]);
const handelClickChose = item => {
  item.checked = !item.checked;
};
const changeAttr2 = (val, item, item2, index) => {
  if (val) {
    data.choseList.push(item2);
  } else {
    choseList.value.map(it => {
      if (it.stastsId == item2.stastsId) {
        choseList.value.splice(choseList.value.indexOf(it), 1);
      }
    });
  }
  console.log(choseList.value, "选中的数据", val);
  // return

  //二级选中的属性id重新排序，按照接口返回的属性顺序排
  let sortArr = [];
  filterVal.value.map((arr, i) => {
    if (index === i) {
      let Arr = [];
      if (arr) {
        for (let ids of arr) {
          const _index = item.children.findIndex(child => child.stastsId == ids);
          if (_index >= 0) {
            Arr[_index] = ids;
          }
        }
      }
      sortArr[index] = Arr;
    }
  });
  filterVal.value[index] = sortArr[index];

  if (!val) {
    item2.select3 = null;
  }

  let ARR = [];
  for (let attr1 of _filterData.value) {
    for (let attr2 of attr1.children) {
      if (attr2.select3 && attr2.select3?.length > 0) {
        attr2.select3.map(obj => {
          ARR.push(attr2.stastsId + "-" + obj);
        });
      }
    }
  }
  filterVal3.value = ARR;

  console.log(22222, filterVal.value, filterVal3.value);

  // emit("changeAttr", { filterVal: filterVal.value, filterVal3: filterVal3.value });
  // emit("updateList", choseList.value);
};
const changeAttr3 = (val, item, index, index2) => {
  console.log(val, item, index, index2);
  // if (val) {
  //   data.choseList.push(item2);
  // }
  // console.log(filterVal.value,"-------------------");
  isChose.value = val;
  // 先清空choseList保存的三阶数据
  let arrs = choseList.value.filter(it => it.checked == true);
  choseList.value = arrs;
  // 在次赋值三级数据给choseList
  const arr = [];
  _filterData.value.map(it => {
    // console.log(it,'原始的数据');
    it.children.map(cit => {
      if (cit.select3?.length > 0) {
        cit.select3.map(obj => {
          cit.children.map(child => {
            if (obj == child.stastsId) {
              arr.push(child);
            }
          });
        });
      }
    });
  });
  // 赋值choseList三级数据
  choseList.value = [...choseList.value, ...arr];

  // 去重
  const uniqueArray = [...new Map(choseList.value.map(item => [item.stastsId, item])).values()];
  choseList.value = uniqueArray;
  // 如果为arr为0清空三级数据
  if (arr.length <= 0) {
    const arr = choseList.value.filter(item => item.checked == true);
    choseList.value = arr;
  }
  console.log(choseList.value, "最后的筛选数据");
  if (val) {
    //任意选中一个3级属性，默认选中对应的二级属性
    console.log(9090909090, filterVal.value, index, index2);
    filterVal.value[index] = filterVal.value[index] || [];
    filterVal.value[index][index2] = item.stastsId;
  }

  let ARR = [];
  for (let attr1 of _filterData.value) {
    for (let attr2 of attr1.children) {
      if (attr2.select3 && attr2.select3?.length > 0) {
        attr2.select3.map(obj => {
          ARR.push(attr2.stastsId + "-" + obj);
        });
      }
    }
  }
  filterVal3.value = ARR;
  console.log(22222, filterVal.value, filterVal3.value);
};
const handelbeforeClose = () => {
  emits("close");
};
const getMoreAttr = () => {
  const parms = {
    categoryId: props.categoryId
  };
  queryStastsList(parms)
    .then(res => {
      console.log(res);
      res.data.map(it => {
        if (it.children?.length > 0) {
          it.children.map(it2 => {
            it2.checked = false;
            if (it2.children?.length > 0) {
              it2.children.map(it3 => {
                it3.checked = false;
              });
            }
          });
        }
      });
      _filterData.value = res.data;
      console.log(res.data, "pppp");
    })
    .catch(err => {
      console.log(err);
    });
};
const handleResat = () => {
  _filterData.value.map(it => {
    it.checked = false;
    if (it.children?.length > 0) {
      it.children.map(it2 => {
        it2.checked = false;
        if (it2.children?.length > 0) {
          it2.children.map(it3 => {
            it3.checked = false;
          });
        }
      });
    }
  });
  data.choseList = [];
};
// 确定
const handleSuer = () => {
  emits("hadOk", filterVal.value, filterVal3.value);
};
onMounted(() => {
  getMoreAttr();
});
</script>
<style scoped lang="scss">
:deep(.el-drawer__body) {
  height: 100%;
  position: relative;
  .btn {
    // position: absolute;
    bottom: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    button {
      width: 92px;
      height: 32px;
    }
  }
}
.head_title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  span {
    font-size: 18px;
    color: #131414;
    position: relative;
    margin-left: 20px;
  }
  span::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #007dff;
    margin-right: 10px;
    border-radius: 50%;
    position: absolute;
    left: -20px;
    top: 6px;
  }
  i {
    cursor: pointer;
  }
}
.center_content {
  .center_content_becurrent {
    padding: 15px;
    .header {
      font-size: 16px;
      color: #000;
      height: 50px;
      display: flex;
      justify-content: space-between;
      .total {
        font-weight: bold;
        color: red;
      }
    }
  }
  .center_content_specification {
    padding: 15px;
    .header {
      font-size: 16px;
      color: #000;
      height: 50px;
    }
  }
}

.attr3 {
  display: flex;
  .child_name {
    margin: 0 10px 0 0;
  }
}
:deep(.el-collapse-item__header) {
  display: none;
}
.sx_chose {
  border-top: 1px solid #eef1f4;
  box-sizing: border-box;
  :deep(.el-collapse-item__header) {
    display: block !important;
    text-align: left;
    position: relative;
    i {
      position: absolute;
      right: 0;
      top: 50%;
    }
  }
}
.secondary {
  :deep(.el-checkbox__input) {
    display: none !important;
  }
  :deep(.el-checkbox) {
    padding: 0 !important;
  }
  .attr2 {
    color: #4e5969 !important;
  }
  :deep(.el-select__wrapper) {
    height: 32px !important;
  }
}
:deep(.el-select__wrapper) {
  height: 32px !important;
}
:deep(.el-collapse) {
  border: none !important;
}
// :deep(.el-checkbox__input) {
//   width: 100px;
//   height: 100%;
//   background: #ffffff;
//   box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.16);
//   border-radius: 4px 4px 4px 4px;
//   padding: 4px 10px;
// }
// :deep(.el-checkbox__label) {
//   position: absolute !important;
//   left: 0 !important;
// }
:deep(.el-checkbox) {
  padding: 7px 19px !important;
}
.active {
  border: 1px solid #007dff;
}
.active-secondary {
  border-bottom: 2px solid #007dff;
}
// :deep(.el-checkbox__inner) {
//   width: 0 !important;
//   height: 0 !important;
//   display: none !important;
// }
:deep(.el-checkbox__label) {
  padding: 0 !important;
}
:deep(.is-checked) {
  color: #000 !important;
}
// :deep(.el-checkbox) {
//   color: #000 !important;
// }
:deep(.el-collapse-item__content) {
  margin-top: 10px;
}
// .filter{
//   // :deep(.el-collapse-item__header){
//   //   display: none !important;
//   // }
// }
.child_name {
  width: auto;
  // height: 100%;
  font-size: 14px;
  color: #3d3d3d;
  display: flex;
  align-items: center;
  cursor: pointer;
  background: #ffffff;
  box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.16);
  border-radius: 4px 4px 4px 4px;
  margin-right: 6px;
  // padding: 5px 19px;
  // overflow: hidden;
  position: relative;
  .attr2 {
    color: #000 !important;
  }
  .check {
    position: absolute;
    right: -1px;
    bottom: -2px;
    img {
      width: 20px;
    }
  }
  :deep(.el-checkbox__input) {
    display: none !important;
  }
}
p,
h1 {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

:deep(.el-collapse-item__header) {
  font-size: 16px;
  color: #3d3d3d;
}

:deep(.el-checkbox-group) {
  display: flex;

  .attr-wrap {
    display: flex;
    align-items: center;
    // border: 1px solid #dcdfe6;
    border-radius: 4px;
    height: 32px;
    // padding: 0 8px;

    &:not(:last-of-type) {
      margin-right: 8px;
    }
  }
}

:deep(.el-checkbox.el-checkbox--small.is-bordered) {
  height: auto;
  height: 32px;

  .el-checkbox__label {
    .attr-wrap {
      display: flex;
      align-items: center;
    }
  }
}
:deep(.el-collapse-head-5) {
  height: 0px !important;
}
.attr-item {
  display: flex;
  align-items: center;
  margin-right: 50px;
}
.reset_box {
  display: flex;
  justify-content: space-between;
  p {
    font-size: 16px;
    color: #3d3d3d;
  }
  button {
    margin-top: 10px;
  }
}
</style>
